import { Layout, Menu, Row, Col, Popover } from 'antd';
import React from 'react';
import { connect } from 'dva';
import { Route, Link, routerRedux } from 'dva/router';
import styles from './basicLayout.css';
import CommodityType from './CommodityType';
import UsersManage from './UsersManage';
import Commodity from './Commodity';
import Rolesmanage from './Rolesmanage';
import UserDetail from './UserDetail';

const { Header, Sider, Content } = Layout;

class SiderDemo extends React.Component {
  state = {
    visible: false,
  }
  hide = () => {
    this.setState({
      visible: false,
    });
  }
  handleVisibleChange = (visible) => {
    this.setState({ visible });
  }
  returnToHomePage = () => {
    this.props.dispatch(routerRedux.push({ pathname: '/', query: { hasLogin: true } }));
  }
  logout = () => {
    this.props.dispatch(routerRedux.push({ pathname: '/', query: { hasLogin: false } }));
  }
  render() {
    return (
      <Layout style={{ height: '100vh' }}>
        <Sider
          trigger={null}
        >
          <div className={styles.logo}>GoodsExchangeSystem</div>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']} className={styles.menu}>
            <Menu.Item key="1">
              <Link to={`${this.props.match.url}/commodity`}>
                <img src="./src/assets/backlogo/commodity.png" alt="" style={{ height: 26, width: 26 }} />
                <span>商品管理</span>
              </Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to={`${this.props.match.url}/commoditytype`}>
                <img src="./src/assets/backlogo/commoditytype.png" alt="" style={{ height: 26, width: 26 }} />
                <span>商品类型</span>
              </Link>
            </Menu.Item>
            <Menu.Item key="3">
              <Link to={`${this.props.match.url}/usersmanage`}>
                <img src="./src/assets/backlogo/usersmanage.png" alt="" style={{ height: 26, width: 26 }} />
                <span>用户管理</span>
              </Link>
            </Menu.Item>
            <Menu.Item key="4">
              <Link to={`${this.props.match.url}/rolesmanage`}>
                <img src="./src/assets/backlogo/rolesmanage.png" alt="" style={{ height: 26, width: 26 }} />
                <span>角色管理</span>
              </Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0, textAlign: 'center', fontSize: 20, color: 'blue' }}>
            <Row type="flex" justify="between">
              <Col span={12}>{}</Col>
              <Col span={12} push={3}>
                <Popover
                  placement="rightBottom"
                  content={
                    <div>
                      <div>
                        <a onClick={this.returnToHomePage}>返回首页</a>
                      </div>
                      <div>
                        <a onClick={this.logout}>退出登录</a>
                      </div>
                    </div>}
                  trigger="click"
                  visible={this.state.visible}
                  onVisibleChange={this.handleVisibleChange}
                >
                  <img src="./src/assets/user/user.jpg" alt="" style={{ height: 36, width: 36 }} />
                </Popover>
              </Col>
            </Row>
          </Header>
          <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
            <Route path={`${this.props.match.url}/commodity`} component={Commodity} />
            <Route path={`${this.props.match.url}/commoditytype`} component={CommodityType} />
            <Route path={`${this.props.match.url}/usersmanage`} component={UsersManage} />
            <Route path={`${this.props.match.url}/rolesmanage`} component={Rolesmanage} />
            <Route path={`${this.props.match.url}/userdetail`} component={UserDetail} />
          </Content>

        </Layout>
      </Layout>
    );
  }
}

export default connect(({ basiclaout }) => ({
  basiclaout,
}))(SiderDemo);
